<template>
  <div class="setting">
    <div class="setting__item" v-for="(item, index) in settings" :key="index">
      <span>{{ item.name }}</span>
      <i
        class="setting__item--switch resume"
        :class="`resume-switch_${item.status ? 'on' : 'off'}`"
        @click="item.status = !item.status"
      />
    </div>
    <div class="setting__item">
      <span>删除当前模块</span>
      <div @click="delMod" class="setting__item--delete setting__item--switch">
        删除
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch } from "vue";
export default {
  name: "RSetting",
  props: {
    modelValue: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:modelValue", "delMod"],
  setup(props, ctx) {
    const settings = ref(props.modelValue);
    watch(
      settings,
      (newVal) => {
        ctx.emit("update:modelValue", newVal);
      },
      { deep: true }
    );
    watch(
      () => props.modelValue,
      (newVal) => {
        settings.value = newVal;
      }
    );
    const delMod = () => ctx.emit("delMod");
    return {
      settings,
      delMod,
    };
  },
};
</script>

<style scoped lang="less">
.setting {
  font-size: 12px;
  position: absolute;
  right: -10px;
  top: 30px;
  padding: 15px 10px 0 10px;
  border: whitesmoke 1px solid;
  box-shadow: 10px 10px 10px whitesmoke;
  z-index: 3;
  background: white;

  &__item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 150px;
    margin-bottom: 15px;

    &--switch {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 37px;
      height: 20px;
      cursor: pointer;
    }

    i {
      font-size: 20px;
    }
    .resume-switch_on {
      color: lightskyblue;
    }

    &--delete {
      box-sizing: border-box;
      width: 36.99px;
      color: lightskyblue;
      border: 1px lightskyblue solid;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-content: center;
    }
  }

  &:before {
    content: "";
    display: block;
    position: absolute;
    right: 10px;
    top: -10px;
    width: 0;
    height: 0;
    border-bottom: 10px whitesmoke solid;
    border-left: 10px transparent solid;
    border-right: 10px transparent solid;
  }

  &:after {
    content: "";
    display: block;
    position: absolute;
    right: 10px;
    top: -9px;
    width: 0;
    height: 0;
    border-bottom: 10px white solid;
    border-left: 10px transparent solid;
    border-right: 10px transparent solid;
  }
}
</style>
